import React, { Component } from 'react';
import '../styles/Search.scss'
import * as service from '../api/index'
class Search extends Component {
    constructor(props){
        super(props)
        this.state={
            hotlist:[],
            nowlist:JSON.parse(localStorage.getItem('historylist')),
            input_text:''
        }
    }
    async componentDidMount(){
        var res = await service.pro_hotword()
        this.setState({hotlist:res.data.data})
    }
    goback(){
        this.props.history.go(-1)
    }
    search_input(item){
        this.setState({ input_text:item },()=>{
        var  arr = this.state.nowlist ? this.state.nowlist : []
        arr.push(this.state.input_text)
        localStorage.setItem('historylist',[JSON.stringify(arr)])
        this.props.history.push({pathname:`/searchResult`,state:{text:this.state.input_text}})
        })
        
    }

    inputchang(e){
        this.setState({ [e.target.name] :  e.target.value })
    }
    searchBtn(){//搜索按钮，获取input实例，获取input value
      var  arr = this.state.nowlist ? this.state.nowlist : []
      if(this.state.input_text  ){
        arr.push(this.state.input_text  )
        localStorage.setItem('historylist',[JSON.stringify(arr)])
      }else{

      }
     
      this.props.history.push({pathname:`/searchResult`,state:{text:this.state.input_text}})
    }
    delhistory(){//删除搜索历史记录
        this.setState({nowlist:[]})
    }
    render() {
        return (
            <div className='search' >
                   <header>
                    <div className="left">
                        <span className='iconfont icon-xiangzuojiantou' onClick={() => { this.goback() } }  >  </span>
                    </div>
                    <div className="input_box">
                        <input ref='inputtext'  type="text" name='input_text' placeholder='搜索店铺内商品' value={this.state.input_text}  onChange={(e)=>{this.inputchang(e)}}/>
                        <span  className='redsearch' onClick={()=>{this.searchBtn()}} >搜索</span>
                    </div>
                </header>
                 <main>                  
                    <div className="Recent">
                       <div className="top">
                         <p>最近搜索</p>
                         <span className='iconfont icon-shanchu' onClick={()=>{this.delhistory()}} ></span>
                       </div>
                    { this.state.nowlist && this.state.nowlist.length !=0 ?
                           <div className="middle">
                           {
                            this.state.nowlist && this.state.nowlist.map((item,index)=>{
                                return(
                                    <span  key={index} onClick={()=>{this.search_input(item)}}  >{ item }</span>
                                )
                            })
                           }
                           </div>
                           :
                           ''
                    }
                    </div>
                    <div className="hot">
                        <p>热门搜索</p>
                       {
                        this.state.hotlist.map((item,index)=>{
                            return(
                                <span  key={index} onClick={()=>{this.search_input(item.keyword  ? item.keyword : '手表' )}}>{ item.keyword  ? item.keyword : '手表' }</span>
                            )
                        })
                       }
                    </div>
                 </main>
            </div>
        );
    }
}

export default Search;